template模板

關於Vue.js的模板，我之前都是直接使用html模板在裡定義好，而在Vue.js裡我們也可以選擇將template的屬性在Options API裡直接加入html的模板，效果會是相同的。
我們可以將程式從

  <div id="app">
    {{greeting}} 你超棒的啦!
  </div>

    const vm = Vue.createApp({
      data(){
        return{
          greeting: 'Hello, nice to meet you!'
        }
      }
    }).mount('#app');

改成這樣

  <div id="app"></div>

    const vm = Vue.createApp({
      template: '{{ greeting }} 你超棒的啦! ',
      data(){
        return{
          greeting: 'Hello, nice to meet you!'
        }
      }
    }).mount('#app');

而上面這兩個程式在網頁上都會是一樣的。

methods方法

在說明methods的使用之前先來看看我們為什麼要使用methods，他的好處是什麼。
之前大概上課的時候有聽老師提過有關程式設計的「三次法則」(rule of three)，但並沒有對這種說法有太深刻的印象，這次跟著教材了解了這種說法是指如果在同一個程式內同樣的運算邏輯或程式碼片段需要重複3次及以上，為了方便後續維護，我們應該將相同的片段提取出來建構包裝成函式可以更方便的使用和進行修正。

所以舉例我現在要網頁在我輸入價格與數量之後告訴我他們的總金額，這是我現在的程式

  ``<div id="app">
        <input type ="number" v-model ="price" placeholder="價格">
        <input type ="number" v-model ="quantity" placeholder="數量">
        價格: {{ price }}
        數量: {{ quantity }},
        <p>總金額: {{ price * quantity }} 元</p>
        <p>總金額: {{ price * quantity }} 元</p>
        <p>總金額: {{ price * quantity }} 元</p>
    </div>

        const count = Vue.createApp({
            data() {
                return {
                    price: 100,
                    quantity: 10
                }
            },
        }).mount('#app');

上面的程式裡面"price * quantity"這個運算出現了三次，在這個時候我們就可以選擇在Vue.js實體李建立methods來幫助我們精簡程式，以下式修改的程式:

    <div id="app">
        <input type ="number" v-model ="price" placeholder="價格">
        <input type ="number" v-model ="quantity" placeholder="數量">
        價格: {{ price }}
        數量: {{ quantity }},
        <p>總金額: {{ total() }} 元</p>
        <p>總金額: {{ total() }} 元</p>
        <p>總金額: {{ total() }} 元</p>
    </div>

        const count = Vue.createApp({
            data() {
                return {
                    price: 100,
                    quantity: 10
                }
            },
            methods: {
                total: function(){
                    return this.price * this.quantity
                }
            }
        }).mount('#app');

這裡我們是在實體內建立了一個叫"total"的methods，並針對使用到的使用到的price和quantity在裡面用"this.xxx"來存它們，而建立起來的methods其實就是一個function所以在前面呼叫他的時候需要加上()，當然在實體裡也可以通過"this.total()"來使用。

今天了解了一些關於template和methods的內容，而同樣關於運算式，Vue.js還有我前面有稍微看過的computed專門用來計算的屬性，我將在明天的進度中對computed更加了解之外，比較一下methods和computed的使用區別與使用場合，謝謝閱讀。